<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点我+1</button>
  </div>
</template>
<script setup lang="ts">
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';

const sum = ref(0)
function add() {
  sum.value++
}
/*创建
 * Vue2：beforeCreate 、created
 * Vue3：setup
 */
console.log('创建')

/*
 * 挂载
 * Vue2：beforeMount 、mounted
 * Vue3：onMounted
 */
onBeforeMount(() => {
  console.log('挂载前')
})
onMounted(() => {
  console.log('子---------挂载后')
})

/*
 * 更新
 * Vue2：beforeUpdate 、updated
 * Vue3：onBeforeUpdate 、onUpdated
 */
onBeforeUpdate(() => {
  console.log('更新前')
})
onUpdated(() => {
  console.log('更新后')
})


/*
 * 销毁
 * Vue2：beforeDestroy 、destroyed
 * 卸载
 * Vue3：onBeforeUnmount 、onUnmounted
 */
onBeforeUnmount(() => {
  console.log('卸载前')
})
onUnmounted(() => {
  console.log('卸载后')
})
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>